<template>
	<view class="content-class">
		<u-row class="tip">{{currentItem.info}}</u-row>
		<view class="jkzs-border">
			<view class="jkzs">
				<view class="health-card" @click="handleClick(currentItem)">
					<u-row class="header">
						<u-row>
							<u-image style="margin-right:8px" width="18px" height="18px" :src="currentItem.icon"></u-image>
							{{ currentItem.name }}
						</u-row>
					</u-row>
					<u-row class="header" style="margin-top: 12px;color:#999;font-size: 12px;">
						<u-row>
							{{ currentItem.info }}
						</u-row>
						<u-row>
							{{ currentItem.subTitle }}
							<u-image style="margin-left:10px" width="20px" height="20px" src="../../../static/images/measuring/arrow.png"></u-image>
						</u-row>
					</u-row>
				</view>
			</view>
		</view>
		<view v-for="(i, iIndex) in cardList" :key="iIndex">
			<view class="jkzs pregnancy-jkzs">
				<view class="health-card">
					<u-row class="header">
						<u-row>
							<u-image style="margin-right:8px" width="16px" height="16px" :src="i.icon"></u-image>
							{{ i.name }}
						</u-row>
						<u-row>
							{{ i.subTitle }}
						</u-row>
					</u-row>
				</view>
			</view>
		</view>
		<view style="color:#303122">
			<u-calendar @confirm="confirmDate" @close="calendarShow=false" :minDate="minDate.replace(minDate.split('-')[0],minDate.split('-')[0] - 1)" monthNum="24" :showTitle="false" color="#FF64BA" round="20" :show="calendarShow"></u-calendar>
		</view>
		<view class="bottom-btn">
			<view class="sport-btn">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from "@/utils/index.js"
	export default {
		data() {
			return {
				currentItem: {
					name: '计算预产期',
					icon: require("../../../static/images/homePage/jsycq.png"),
					subTitle: '2023-06-13',
					info: '最近一次经期开始时间',
					event: 'setStartDate'
				},
				minDate: parseTime(new Date(), '{y}-{m}-{d}'),
				calendarShow: false,
				cardList: [{
					name: '预产期时间',
					icon: require("../../../static/images/homePage/ycqsj.png"),
					subTitle: '2025-02-13',
					info: '您的最近一次经期开始日期是什么时候',
				}]
			};
		},
		mounted() {
			this.cardList[0].subTitle = this.calculateDueDate(this.currentItem.subTitle)
		},
		watch: {
			'currentItem.subTitle'(val) {
				this.cardList[0].subTitle = this.calculateDueDate(val)
			}
		},
		methods: {
			calculateDueDate(lastMenstrualPeriod) {
				if (!lastMenstrualPeriod || isNaN(new Date(lastMenstrualPeriod))) {
					return '请输入有效的末次经期日期';
				}
				const lmp = new Date(lastMenstrualPeriod);
				// 计算预产期
				const dueDate = new Date(lmp);
				dueDate.setFullYear(dueDate.getFullYear() + 1);
				dueDate.setMonth(dueDate.getMonth() - 3);
				dueDate.setDate(dueDate.getDate() + 7);
				const year = dueDate.getFullYear();
				const month = String(dueDate.getMonth() + 1).padStart(2, '0');
				const day = String(dueDate.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			handleClick(i) {
				this.currentItem = i
				if (!i.event) return
				this[i.event]()
			},
			setStartDate() {
				this.calendarShow = true
			},
			confirmDate(e) {
				this.currentItem.subTitle = e[0]
				this.calendarShow = false
			}
		},
	};
</script>

<style scoped lang="scss">
	.content-class {
		padding: 15px;

		.tip {
			font-weight: bold;
			color: #999999;
			line-height: 50px;

		}

		.jkzs-border {
			margin-bottom: 15px;
		}

		.pregnancy-jkzs {
			border-radius: 12px;
			border: none;
			box-shadow: unset;
			background-color: #1B1B1B;
		}

		.health-card {
			.header {
				justify-content: space-between !important;
				font-size: 14px;
			}
		}
	}
</style>